@import './error-bubble.css';

:global(.ring-error-bubble) {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(100% + 2px);

  display: none;

  box-sizing: border-box;
  min-height: calc(3 * var(--ring-unit));
  padding-right: calc(2 * var(--ring-unit));
  padding-left: calc(2 * var(--ring-unit));

  white-space: nowrap;

  color: var(--ring-error-color);
  border: 1px solid var(--ring-popup-border-color);

  border-radius: var(--ring-border-radius);
  background: var(--ring-error-bubble-background-color);
  box-shadow: var(--ring-popup-shadow);

  font-family: var(--ring-font-family);

  font-size: 12px;

  line-height: 22px;
}

:global(.ring-error-bubble.active) {
  display: inline-block;
}

:global(.ring-error-bubble::before) {
  position: absolute;
  z-index: var(--ring-invisible-element-z-index);
  top: 7px;
  left: -5px;

  display: block;

  width: var(--ring-unit);
  height: var(--ring-unit);

  content: '';
  transform: rotate(45deg);

  border: 1px solid var(--ring-popup-border-color);
  border-top: 0;
  border-right: 0;

  background: var(--ring-error-bubble-background-color);
}

:global(.ring-error-bubble_material) {
  padding-left: var(--ring-unit);

  border: 0;
  background: transparent none;
  box-shadow: none;
}

:global(.ring-error-bubble_material::before) {
  display: none;
}

:global(.ring-form__control .ring-error-bubble) {
  top: 1px;
}

/**
 * .ring-error-bubble requires a position: relative container.
 * Use this class if your markup doesn't have one.
 */
:global(.ring-error-bubble-wrapper) {
  position: relative;
}
